<!-- 页面外套 -->
<div class="page-wrapper" id="personnel_attendance_punch_time">
    
    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped" id="personnel_attendance_punch_time_datagrid">

        <!-- 工具条组 -->
        <div class="tool-group">
            <div class="tool-search">
                <div class="im-label">
                    <div class="input-group">
                        <select class="form-control" id="personnel_attendance_punch_time_tool_keys">
                            <option value="1">姓名</option>
                            <option value="2">工号</option>
                        </select>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" id="personnel_attendance_punch_time_tool_search">
                    </div>
                </div>
                <label id="personnel_attendance_punch_time_tool_select_group"><!--JS推进--></label>
                <label>
                    <span>在职状态：</span>
                    <select class="form-control" id="personnel_attendance_punch_time_tool_select3"><!--JS推进--></select>
                </label>

                <div class="im-label">
                    <span>时间：</span>
                    <input type="text" class="form-control" id="personnel_attendance_punch_time_tool_date1" readonly>
                </div>
                <label><button class="btn btn-primary" id="personnel_attendance_punch_time_search_btn"><i class="icon icon-search"></i> 搜索</button></label>
                <div class="clearfix"></div>
            </div>
            <div class="tool-deal">
                <label><button class="btn btn-primary" id="personnel_attendance_punch_time_export_btn"><i class="icon icon-external-link"></i> 导出</button></label>
                <div class="clearfix"></div>
            </div>
        </div>
        <!-- tool-group -->

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>
    <!-- datagrid -->

</div>
<!-- page-wrapper -->

<script>
$(function(){

    //变量声明-----------------------------------------------------------------------------------------------
    var
    personnel_attendance_punch_time                    = $("#personnel_attendance_punch_time"),                     //页面ID
    personnel_attendance_punch_time_datagrid           = $("#personnel_attendance_punch_time_datagrid"),            //数据表格
    //搜索
    personnel_attendance_punch_time_tool_keys          = $("#personnel_attendance_punch_time_tool_keys"),           //搜索类别
    personnel_attendance_punch_time_tool_search        = $("#personnel_attendance_punch_time_tool_search"),         //搜索字段
    personnel_attendance_punch_time_tool_select_group  = $("#personnel_attendance_punch_time_tool_select_group"),   //下拉选择1
    personnel_attendance_punch_time_tool_select3       = $("#personnel_attendance_punch_time_tool_select3"),        //下拉选择2
    personnel_attendance_punch_time_tool_date1         = $("#personnel_attendance_punch_time_tool_date1"),          //时间选择  
    personnel_attendance_punch_time_search_btn         = $("#personnel_attendance_punch_time_search_btn"),          //搜索按钮
    personnel_attendance_punch_time_export_btn         = $("#personnel_attendance_punch_time_export_btn");          //导出按钮

    //当前时间获取(影响date1和datagrid)
    var now_time = um_date("yyyy-MM");

    //接口对象-----------------------------------------------------------------------------------------------
    if( window.STATE == "local" ){

        //本地接口
        var personnel_attendance_punch_time_api = {
            datagrid  : LOCAL + "Test/Personnel/Attendance/punch_time.json",    //数据表格
            select    : LOCAL + "Test/test_select.json",                        //下拉选择
        }

    } else if ( window.STATE == "route" ){

        //远程接口
        var personnel_attendance_punch_time_api = {
            datagrid  : LOCAL + "Test/Personnel/Attendance/punch_time.json",         //数据表格
            select    : LOCAL + "Test/test_select.json",                        //下拉选择
        }

    }

    //数据表格-----------------------------------------------------------------------------------------------
    personnel_attendance_punch_time_datagrid.datagrid({
        height      : zui_datagrid_height(personnel_attendance_punch_time_datagrid),
        sortable    : false,
        cache       : false,
        showRowIndex: true,
        configs     : {
            R0:{className:"text-center"},
            C1:{className:"cell-hidden"}
        },
        states      : {
            fixedLeftUntil  : 3,
            pager           : {
                page        : 1,
                recPerPage  : window.REC_PER_PAGE,
            }
        },
        dataSource : {
            cols   : [
                {html:true,width:49,name:"id",        label:"ID"      },
                {html:true,width:80,name:"user",      label:"姓名"    },
                {html:true,width:80,name:"number",    label:"工号"    },
                {html:true,width:80,name:"depart",    label:"部门"    },
                {html:true,width:80,name:"post",      label:"职位"    },
                //打卡时间
                {html:true,width:180,name:"statistic",label:"01",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[0] +"'>"+dataValue[0] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"02",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[1] +"'>"+dataValue[1] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"03",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[2] +"'>"+dataValue[2] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"04",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[3] +"'>"+dataValue[3] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"05",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[4] +"'>"+dataValue[4] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"06",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[5] +"'>"+dataValue[5] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"07",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[6] +"'>"+dataValue[6] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"08",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[7] +"'>"+dataValue[7] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"09",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[8] +"'>"+dataValue[8] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"10",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[9] +"'>"+dataValue[9] +"</span>";}}},
                {html:true,width:180,name:"statistic",label:"11",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[10]+"'>"+dataValue[10]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"12",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[11]+"'>"+dataValue[11]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"13",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[12]+"'>"+dataValue[12]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"14",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[13]+"'>"+dataValue[13]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"15",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[14]+"'>"+dataValue[14]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"16",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[15]+"'>"+dataValue[15]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"17",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[16]+"'>"+dataValue[16]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"18",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[17]+"'>"+dataValue[17]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"19",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[18]+"'>"+dataValue[18]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"20",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[19]+"'>"+dataValue[19]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"21",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[20]+"'>"+dataValue[20]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"22",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[21]+"'>"+dataValue[21]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"23",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[22]+"'>"+dataValue[22]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"24",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[23]+"'>"+dataValue[23]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"25",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[24]+"'>"+dataValue[24]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"26",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[25]+"'>"+dataValue[25]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"27",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[26]+"'>"+dataValue[26]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"28",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[27]+"'>"+dataValue[27]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"29",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[28]+"'>"+dataValue[28]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"30",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[29]+"'>"+dataValue[29]+"</span>";}}},
                {html:true,width:180,name:"statistic",label:"31",valueOperator:{getter:function(dataValue){ return "<span title='"+dataValue[30]+"'>"+dataValue[30]+"</span>";}}},
            ],
            remote : function(){
                return {
                    url     : personnel_attendance_punch_time_api.datagrid+"?date1="+now_time,
                    type    : "POST",
                    dataType: "json",
                }
            }
        },
        valueOperator : {
            string : {
                getter : function(dataValue,cell,dataGrid){
                    var resu = "";
                    ( dataValue=="0" ) ? resu="<span style='color:lightgrey'>"+dataValue+"</span>" : resu = dataValue;
                    return resu;
                }
            }
        }
    });//datagrid()

    //变量声明-----------------------------------------------------------------------------------------------
    var 
    personnel_attendance_punch_time_datagrid_obj    = personnel_attendance_punch_time_datagrid.data("zui.datagrid"),//表格对象
    personnel_attendance_punch_time_result_edit_btn = ".personnel_attendance_punch_time_result_edit_btn";           //修改按钮
    
    //时间组件-----------------------------------------------------------------------------------------------
    personnel_attendance_punch_time_tool_date1.datetimepicker(option_month);
    personnel_attendance_punch_time_tool_date1.val( now_time );

    //下拉选项-----------------------------------------------------------------------------------------------
    common_select_linkage("#personnel_attendance_punch_time_tool_select_group","1");                                //搜索

    //在职状态
    $.ajax({
        url     : personnel_attendance_punch_time_api.select,
        type    : "post",
        dataType: "json",
        data    : {},
        success : function(data){
            if( data.status>0 ){
                var data = data.data;
                var option = "<option value='0'>全部</option>";
                for(var i=0;i<data.length;i++){
                    option += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                }
                personnel_attendance_punch_time_tool_select3.html(option);
            }
        }
    });

    //搜索按钮-----------------------------------------------------------------------------------------------
    personnel_attendance_punch_time_search_btn.click(function(){

        //字段整理
        var keyword
        = "?sid="    + personnel_attendance_punch_time_tool_keys.val()
        + "&search=" + personnel_attendance_punch_time_tool_search.val()
        + "&depart=" + personnel_attendance_punch_time_tool_select_group.find(".common_select_depart").val()
        + "&state="  + personnel_attendance_punch_time_tool_select3.val()
        + "&date="   + personnel_attendance_punch_time_tool_date1.val();

        //GET提交
        zui_datagrid_render(personnel_attendance_punch_time_datagrid_obj,personnel_attendance_punch_time_api.datagrid+keyword);

    });

    //导出按钮-----------------------------------------------------------------------------------------------
    personnel_attendance_punch_time_export_btn.click(function(){

        //远程提交
        $.ajax({
            url     : API.test_response,
            type    : "post",
            dataType: "json",
            data    : {
                keys    : personnel_attendance_punch_time_tool_keys.val(),
                search  : personnel_attendance_punch_time_tool_search.val(),
                depart  : personnel_attendance_punch_time_tool_select_group.find(".common_select_depart").val(),
                state   : personnel_attendance_punch_time_tool_select3.val(),
                date    : personnel_attendance_punch_time_tool_date1.val(),
            },
            beforesend : function(){
                um_tip("导出中…");
            },
            success : function(data){
                if( data.status>0 ){
                    window.open(API.test_export);
                } else {
                    um_tip(data.message,"1500","text-danger");
                }
            }
        });

    });

});//预加载结尾
</script>